<template>
  <v-layout type="main">
    <!-- <div class="clearfix">
      <div class="search-box">
        <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入内容"
          @input="getData" />
        <a href="javascript:;" class="add el-icon-plus" @click="$router.push({ path: '/gameTask/detail' })">新增</a>
      </div>
    </div> -->

    <!-- <div class="has-ver-table-layout">
      <ul class="has-vers-lis">
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
          <li v-for="(e, i) in tableData" :key="i">
            <el-collapse-item :name=i>
              <template slot="title">

                <div class="item-link" @click="$router.push({ path: '/task/code', query: { id: e.id } })">
                  {{ e.name }}
                </div>

                <div class="item">创建时间：{{ e.create_time }} </div>
                <div class="item">创建人：{{ e.create_user && e.create_user.nick_name }}</div>

              </template>
              <el-table :data="e.latest_versions" header-row-class-name="header-style">
                <el-table-column prop="name" label="版本">
                  <template slot-scope="{ row }">
                    <el-popover placement="right-start" width="320" trigger="hover">
                      <row-data :row="row" />
                      <el-button type="text"
                        @click="$router.push({ path: '/task/code', query: { id: e.id, source_version_id: row.id } })"
                        slot="reference">{{ row.version }}</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column prop="update_time" label="修改时间" />
                <el-table-column label="运行时长">
                  <template slot-scope="{ row }">
                    {{ countRanTime(row.resource && row.resource.start_time) }}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="{ row }">
                    <span :class="['alick-list-status', row.status]">●{{ statusMap[row.status] }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="操作">
                  <template slot-scope="{ row }">
                    <el-button type="text" @click="stop(row)">停止</el-button>
                    <el-button type="text" @click="del(row)">删除</el-button>
                    <el-button type="text" @click="copy(row)">复制</el-button>
                  </template>
                </el-table-column>
                <template slot="empty">
                  <p>暂无版本</p>
                </template>
              </el-table>
            </el-collapse-item>
          </li>
        </el-collapse>
      </ul>
    </div> -->

    <div class="task-box">
      <drawer-box class="infinite-list" @unfold="unfoldChange" :key="forceRerenderKey">
        <template slot="add">
          <div class="infinite-search">
            <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入内容"
              @input="getData" />
            <a href="javascript:;" class="add el-icon-plus" @click="$router.push({ path: '/gameTask/detail' })">新增</a>
          </div>
        </template>
        <div class="utils">
          <div class="all-check">
            <el-checkbox v-model="allChecked" />
            <span>模型训练列表</span>
          </div>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              排序<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>名称排序</el-dropdown-item>
              <el-dropdown-item>时间排序</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <template v-if="!isCollapse">
          <div :class="['infinite-item', { 'is-active': item.id === detailData.id }]" v-for="item in taskList"
            :key="item.id" @click="handleChange(item)">
            <!-- <div class="title" @click="$router.push({ path: '/task/code', query: { id: item.id } })> -->
            <div class="infinite-item-left">
              <el-checkbox v-model="item.checked" />
            </div>
            <div class="infinite-item-center">
              <div class="title">
                <span>{{ item.name }}</span>
              </div>
              <div class="item tag">
                <el-tag effect="dark" size="mini">{{ item.create_user && item.create_user.nick_name }}</el-tag>
                <el-tag type="info" effect="dark" size="mini">{{ item.create_time }}</el-tag>
              </div>
              <div class="item desc">
                {{ item.desc }}
              </div>
            </div>
            <!-- <div class="tag">
              <el-tag effect="dark" size="mini">{{ item.create_user && item.create_user.nick_name }}</el-tag>
              <el-tag type="info" effect="dark" size="mini">{{ item.create_time }}</el-tag>
            </div> -->
          </div>
        </template>
        <template v-else>
          <el-table :data="taskList" stripe style="width: 100%" class="drawer-box-table">
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <span @click="tableItemHandler(scope.row)" style="cursor: pointer;">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_user.nick_name" label="创建人"></el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                {{ scope.row.desc }}
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="update_time" label="更新时间"></el-table-column>
          </el-table>
        </template>
      </drawer-box>

      <div class="task-container">
        <el-table :data="detailData.latest_versions" header-row-class-name="header-style">
          <el-table-column prop="name" label="版本">
            <template slot-scope="{ row }">
              <el-popover placement="right-start" width="320" trigger="hover">
                <row-data :row="row" />
                <el-button type="text"
                  @click="$router.push({ path: '/gameTask/code', query: { id: detailData.id, source_version_id: row.id } })"
                  slot="reference">{{ row.version }}</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="update_time" label="修改时间" />
          <el-table-column label="运行时长">
            <template slot-scope="{ row }">
              {{ countRanTime(row.resource && row.resource.start_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="{ row }">
              <span :class="['alick-list-status', row.status]">●{{ statusMap[row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="stop(row)">停止</el-button>
              <!-- <el-button type="text" @click="del(row)">删除</el-button> -->
              <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
                <p>您确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="del(row)">确定</el-button>
                </div>
                <el-button type="text" slot="reference">删除</el-button>
                <!-- <el-button slot="reference" type="danger" size="mini">删除</el-button> -->
                <!-- <i slot="reference" class="el-icon-delete delete-btn" /> -->
              </el-popover>
              <el-button type="text" @click="copy(row)">复制</el-button>
            </template>
          </el-table-column>
          <template slot="empty">
            <p>暂无版本</p>
          </template>
        </el-table>
      </div>
    </div>
  </v-layout>
</template>

<script>
import drawerBox from "@/components/module/drawer-box.vue"
import { mapActions, mapState } from "vuex"
import { addGameTaskVersion, getGameTaskVersionDetail, getGameTasks, delGameTask, delGameTaskVersion, getGameTaskDetail, stopGameTaskVersion } from "@/api/gameTask"
export default {
  data() {
    return {
      showThisActive: 1,
      tableData: [
        { id: 1566853182783520, game_task_id: 1, version: 'v3', create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, create_time: '2023-09-08 15:23:10', update_time: '2023-09-08 15:23:10', status: 'terminated' },
        { id: 2, game_task_id: 2, version: 'v3', create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, create_time: '2023-09-08 15:23:10', update_time: '2023-09-08 15:23:10', status: 'terminated' },
        { id: 3, game_task_id: 3, version: 'v3', create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, create_time: '2023-09-08 15:23:10', update_time: '2023-09-08 15:23:10', status: 'running' },
        { id: 4, game_task_id: 4, version: 'v3', create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, create_time: '2023-09-08 15:23:10', update_time: '2023-09-08 15:23:10', status: 'completed' },
      ],
      Pagedata: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      nowRouter: this.$route.name,
      // detailData: {},
      // unfold: false,
      forceRerenderKey: 0,
      allChecked: false
    };
  },
  computed: mapState({
    taskList: state => state.gameTaskStore.taskList,
    isCollapse: state => state.gameTaskStore.isCollapse,
    detailData: state => state.gameTaskStore.detail,
  }),
  mounted() {
    let temp = this.$router.options.routes?.filter(
      e => e.name == 'gameTask' && e.children
    )
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)

    this.getTaskList(this.Pagedata)

    // let resVersion = getGameTaskVersionDetail({ id: row.id })
    // let versionData = resVersion.data

    // this.getData()
    // this.$router.push(`/gameTask/code/${this.tableData[0].id}`)
    // this.nowRouter = this.$route.name
  },
  methods: {
    ...mapActions(["getTaskList", "updateDetail"]),
    forceRerender() {
      this.forceRerenderKey += 1;
    },
    unfoldChange(val) {
      this.$store.commit('GAMETASKUNFOLDCHANGE', val);
    },
    tableItemHandler(val) {
      this.updateDetail(val)
      this.unfoldChange(false)

      this.$router.push({
        path: "/gameTask",
        query: {
          id: val.id
        }
      })

      this.forceRerender()
    },
    skip() {
      // let path = `/gameTask/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      // if (path == this.$route.path) return
      // this.$router.push({
      //   path,
      //   // query: {
      //   //   id: this.$route.query.id
      //   // }
      // })
    },
    // unfoldChange(val) {
    //   this.unfold = val;
    // },
    async handleChange(data) {
      // console.log(data);
      // let resTask = await getGameTaskDetail({ id: data.id })
      // this.detailData = resTask.data;
      // this.updateDetail(resTask.data)
      this.updateDetail(data)

      // this.$router.push({
      //   path: '/task/code',
      //   query: { id: data.id }
      // })
    },
    async getData() {
      let res = await getGameTasks({ ...this.Pagedata })
      console.log(res, "res");
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total

    },
    async delTask({ id }) {
      // let res = await this.$isDel();
      // if (res) {
      await delGameTask({ id })
      this.getData()
      // }
    },
    async copy(row) {
      let resTask = await getGameTaskDetail({ id: row.game_task_id })
      let task = resTask.data
      let resVersion = await getGameTaskVersionDetail({ id: row.id })
      let versionData = resVersion.data
      versionData.version = "v" + (task.version_index + 1)
      versionData.copy_version = row.id
      let ret = await addGameTaskVersion(versionData)
      let newVersionData = ret.data
      let query = {
        id: task.id,
        source_version_id: newVersionData.id
      }
      this.$router.push({
        path: '/gameTask/code',
        query
      })
    },
    async stop(row) {
      await stopGameTaskVersion({ id: row.id })
      this.getData()
    },
    async del(row) {
      await delGameTaskVersion({ id: row.id })
      this.getData()
    },
    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.getData()
    },
  },
  components: { drawerBox }
}
</script>
<style lang="less" scoped>
.task-box {
  display: flex;

  .task-container {
    width: 100%;
    // margin-left: 220px;
    margin-left: 460px;
  }
}
</style>